<template>
<div>
    <my-header></my-header>
    <el-container class="login_header">
        <el-main class="login_main">
             <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                 <el-form-item  prop="username" class="Form_items">
                    <el-input v-model="ruleForm.username" placeholder="身份证号码"></el-input>
                </el-form-item>
                 <el-form-item  prop="password" class="Form_items">
                    <el-input v-model="ruleForm.password" type="password" placeholder="密码" @keyup.enter.native="submitForm('ruleForm')"></el-input>
                </el-form-item>
                <el-form-item class="Form_items">
                    <el-button type="primary" @click="submitForm('ruleForm')" class="Sub">登录</el-button>
                </el-form-item>
                </el-form>
                <router-link to="/register" class="register">账号注册</router-link>
            </el-main>
            
    </el-container>
</div>
    
   
</template>

<script>
import Header from "./header"
   export default {
    data() {
        return {
            ruleForm:{
                username:null,
                password:null
            },
            rules:{
                username:[{required: true, message: '请输入身份证号码', trigger: 'blur'}],
                password:[{required: true, message: '请输入密码', trigger: 'blur'}]
            }
        }
        
    },
    components:{
        myHeader:Header
    },
    methods:{
         submitForm(formName) {
             console.log("aaa")
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url="/user/login";
            let formData=new FormData();
            formData.append("personNumber",this.ruleForm.username)
            formData.append("password",this.ruleForm.password)
            this.axios.post(url,formData).then(res=>{
                if(res.data.status==0){
                    this.$store.commit("saveUserInfo",res.data.data)
                    this.$router.replace("/admin")
                    // window.location.hash="/admin";
                }else{
                    this.$message(res.data.msg)
                };
                
            },err=>{
                
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
    
  }
</script>

<style scoped>
    .login_header{
        width: 30%;
        margin: 100px auto 
    }
    .login_main{
        border: 1px solid #ebebeb;
    }
    .Sub{
        width: 100%
    }
    .Form_items >>> .el-form-item__content{
        margin-left: 0px !important;
    }
    .register{
        text-decoration: none;
        color: #606266;
    }
</style>